<template>
  <div>
    <fxsHeader :type="2" :Data="fxsHeaderData"></fxsHeader>
    <div class="item-card">
      <div class="item-search">
        <search-box @search="search" :placeholder="Placeholder" v-model="keyWord"></search-box>
      </div>
    </div>
    <div class="user-list" v-show="list.length">
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        :immediate-check="immediateCheck"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="onLoad"
      >
        <div v-for="(item, index) in list" :key="index" class="item clearfix">
          <div class="levelimg fl">
            <img :src="item.headimgurl || defaultPhotoImg" width="100%" alt />
          </div>
          <div class="levelinfo fl">
            <p v-if="item.nickname">
              <span>昵称：</span>
              <span>{{item.nickname}}</span>
            </p>
            <p v-if="item.user_id">
              <span>用户ID：</span>
              <span>{{item.user_id}}</span>
            </p>
            <p v-if="item.mobile">
              <span>手机：</span>
              <span>{{item.mobile}}</span>
            </p>
            <p v-if="item.country || item.province || item.city">
              <span>地区：</span>
              <span>{{item.country}}{{item.province}}{{item.city}}</span>
            </p>
            <p v-if="item.level_name">
              <span>级别：</span>
              <span>{{item.level_name}}</span>
            </p>
            <p v-if="item.director">
              <span>上级：</span>
              <span>{{item.director}}</span>
            </p>
            <p v-else-if="item.superior_user_id">
              <span>上级ID：</span>
              <span>{{item.superior_user_id}}</span>
            </p>
            <p v-if="item.create_time">
              <span>时间：</span>
              <span>{{item.create_time}}</span>
            </p>
            <p v-if="item.rank_title">
              <span>等级：</span>
              <span>{{item.rank_title}}</span>
            </p>
          </div>
        </div>
      </van-list>
    </div>
    <div v-show="!list.length && finished">
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
  // import noDataImg from '@img/user/no_user_data.png'
  import noData from '@/components/noData/index'
  // import default_photo_img from '@img/default_avatar.jpg'
  import fxsHeader from '@/views/user/staffCenter/components/staffHeader/index'
  import searchBox from '@/views/user/components/search/index'
  import Scroll from '@/components/scroll/index'
  import { getNextLevelUser } from '@/api/user/fxs/fxsApi'
  
  import Vue from 'vue'
  export default Vue.extend({
    data() {
      return {
        defaultPhotoImg: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
        noData: {
          text: '暂无会员',
          img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_user_data.png',
          marginTop: '10em'
        },
        fxsHeaderData: {
          commission_name: '',
          total_commissions: '',
          total_fee: null,
          ftitle_superior_user_order: null,
          superior_user_payment: null,
          show_fxProduct: null,
          fenxiao_goods_count: '',
          ftitle_item: '',
          next_lever_agent_count: '',
          ftitle_agents: '',
          show_myUser: null,
          next_lever_user_count: '',
          ftitle_users: '',
          show_fxOrder: null,
          fenxiao_order_count: '',
          ftitle_fx_order: ''
        },
        // 搜索组件
        Placeholder: '',
        // 分类筛选按钮控制
        show_in_wx: 0,
        business_model: '0',
        ftitle_users: '',
        level_superior: '',
        level_top: '',
        level_three: '',
        is_agent: 2,
        type: 1,
        p: 1,
        keyWord: '',
        // vant 列表组件
        loading: false,
        finished: false,
        error: false,
        immediateCheck: false,
        // 列表
        list: []
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)
        this.onLoad()
      },
      onLoad() {
        const data = {
          is_agent: this.is_agent,
          p: this.p,
          type: this.type,
          keyword: this.keyWord
        }
        getNextLevelUser(data).then(res => {
          this.loading = false
          this.$loadingWrap.close()
          if (res.status == 1) {
            let resData = res
            if (data.p == 1) {
              resData = res.data
              this.is_agent = resData.data.is_agent
              // 头部和导航数据
              this.fxsHeaderData.commission_name = resData.data.commission_name
              this.fxsHeaderData.total_commissions =
                resData.data.total_commissions
              // this.fxsHeaderData.ftitle_fx_order = resData.data.ftitle_fx_order
              // 分销产品
              this.fxsHeaderData.show_fxProduct = resData.data.show_fxProduct
              this.fxsHeaderData.fenxiao_goods_count =
                resData.data.fenxiao_goods_count
              if (this.is_agent == 1) {
                this.fxsHeaderData.ftitle_item = resData.data.ftitle_item
              } else if (this.is_agent == 2) {
                this.fxsHeaderData.ftitle_item = resData.data.ftitle_staff_goods
              } else if (this.is_agent == 3) {
                this.fxsHeaderData.ftitle_item = resData.data.ftitle_store_goods
              }
              // 分销商
              this.fxsHeaderData.next_lever_agent_count =
                resData.data.next_lever_agent_count
              this.fxsHeaderData.ftitle_agents = resData.data.ftitle_agents
              // 会员
              this.fxsHeaderData.show_myUser = resData.data.show_myUser
              this.fxsHeaderData.next_lever_user_count =
                resData.data.next_lever_user_count
              if (this.is_agent == 1) {
                this.fxsHeaderData.ftitle_users = resData.data.ftitle_users
              } else if (this.is_agent == 2) {
                this.fxsHeaderData.ftitle_users = resData.data.ftitle_staff_user
              } else if (this.is_agent == 3) {
                this.fxsHeaderData.ftitle_users = resData.data.ftitle_store_user
              }
              // 订单
              this.fxsHeaderData.show_fxOrder = resData.data.show_fxOrder
              this.fxsHeaderData.fenxiao_order_count =
                resData.data.fenxiao_order_count
              this.fxsHeaderData.ftitle_fx_order = resData.data.ftitle_fx_order
              // 搜索
              this.Placeholder = `请输入${resData.data.ftitle_users}id/昵称 查找${resData.data.ftitle_users}`
              // 按钮
              this.show_in_wx = resData.data.show_in_wx
              this.business_model = resData.data.business_model
              this.arr = resData.data.arr
              this.ftitle_users = resData.data.ftitle_users
              this.level_superior = resData.data.level_superior
              this.level_top = resData.data.level_top
              this.level_three = resData.data.level_three
              // 其它
              this.noData.text = `暂无${this.ftitle_users}`
              // 页码为1时   初始列表
              this.list = []
            }
            // 列表
            if (resData.data.user_list && resData.data.user_list.length) {
              this.list.push(...resData.data.user_list)
              this.p++
            } else {
              this.finished = true
            }
          } else {
            this.$Error(res.msg)
          }
        })
      },
      selectItem(type) {
        if (type == this.type) return
        this.type = type
        this.keyWord = ''
        this.search()
      },
      search() {
        this.p = 1
        this.finished = false
        this.error = false
        this.loading = false
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)
        this.onLoad()
      }
    },
    components: {
      fxsHeader,
      noData,
      searchBox,
      Scroll
    },
    mounted() {
      // 小程序触底加载更多
      window.addEventListener("reachbottom", () => {
        this.onLoad()
      })
    }
  })
</script>

<style lang="scss">
  @import 'src/styles/user/cardList/index.scss';
  @import 'src/styles/variables.scss';
  @import 'src/styles/user/Group/index';
</style>
